<template>
	<view>
		<view class="header pd-20 mlr-36 flex1 flex-between flex-column">
			<view class="flex1 flex-middle">
				<view class="">
					<view class="white size-28">
						我的总余额
					</view>
					<view class="white bold">
						<text class="size-40">￥</text>
						<text class="size-50">{{userInfo.money}}</text>
					</view>
				</view>
				<!-- <view class="bg-white yellow ptb-6 plr-30 radius-10 mt-14 ml-70" @click="goCash">
					提现
				</view> -->
			</view>
			<view class="flex1 flex-middle white">
				<view class="">
					<view class="size-24">
						积分
					</view>
					<view class="mt-4">
						<text class="size-36">{{userInfo.score}}</text>
					</view>
				</view>
				<!-- <view class="ml-70">
					<view class="size-24">
						佣金收益
					</view>
					<view class="mt-4">
						<text class="size-28">￥</text>
						<text class="size-36">{{userInfo.bonus}}</text>
					</view>
				</view> -->
			</view>
		</view>
		<view class="plr-36 mt-40 size-32 bold">
			余额明细
		</view>
		<empty top="150" v-if="total === 0"></empty>
		<view class="ml-36 pr-36 ptb-25 flex bb" v-for="(item,i) in list" :key="i">
			<view class="u-flex-1 mr-20">
				<view class="bold">
					{{item.memo}}
				</view>
				<view class="size-26 gray-2 mt-10">
					{{item.createtime_text}}
				</view>
			</view>
			<view :class="[item.money >= 0?'green':'red','size-26']">
				{{item.money >= 0?'+':''}}{{item.money}}
			</view>
		</view>
		<u-loadmore v-show="list.length && list.length <= total" :status="status" icon-type="flower" bg-color="transperant" margin-top="30" margin-bottom="30" />
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				status: 'loadmore',
				total: null
			}
		},
		computed:{
			...mapState(["userInfo"])
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'/pages/my/balance?type=2'
			})
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.init()
		},
		onReachBottom() {
			if (this.status == 'loading' || this.status == 'nomore') {
				return false;
			}
			this.init()
		},
		onLoad() {
			this.init()
		},
		methods: {
			goCash(){
				uni.navigateTo({
					url:'/pages/my/cash'
				})
			},
			scoreList(){
				uni.navigateTo({
					url:'/pages/my/balance?type=2'
				})
			},
			init() {
				this.status = "loading";
				this.$http('/api/user/moneylog', {
					page: this.page
				}).then(data => {
					this.list = this.list.concat(data.rows);
					this.total = data.total;
					if (this.list.length >= data.total) {
						this.status = "nomore";
					} else {
						this.page = this.page + 1
						this.status = "loadmore";
					}
					uni.stopPullDownRefresh();
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header{
		height: 270rpx;
		background: url(../../static/wallet-header-bg.png) no-repeat;
		background-size: 100% 100%;
	}
</style>
